<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .button {
            background: #409EFF;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 10px;
            border-radius: 4px;
            cursor: pointer;
        }

        .button:hover {
            background: #337ecc;
        }

        .result {
            background: #f9f9f9;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            border-left: 4px solid #409EFF;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 500px;
            overflow-y: auto;
        }

        .route-item {
            background: white;
            margin: 5px 0;
            padding: 10px;
            border-radius: 4px;
            border-left: 3px solid #67C23A;
        }

        .method {
            background: #E6A23C;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 8px;
        }

        .endpoint {
            font-weight: bold;
            color: #303133;
        }

        .path {
            color: #606266;
            font-family: monospace;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Flask 应用路由测试</h1>
        <p>点击下面的按钮来测试路由调试功能：</p>

        <button class="button" onclick="getAllRoutes()">获取所有路由</button>
        <button class="button" onclick="getEndpointsByBlueprint()">按蓝图分组获取端点</button>
        <button class="button" onclick="getProductsAPI()">测试产品API</button>

        <div id="result" class="result" style="display: none;"></div>
        <div id="formatted-result" style="display: none;"></div>
    </div>

    <script>
        const baseURL = 'http://127.0.0.1:5001';

        function showResult(data, formatted = false) {
            const resultDiv = document.getElementById('result');
            const formattedDiv = document.getElementById('formatted-result');

            if (formatted) {
                resultDiv.style.display = 'none';
                formattedDiv.style.display = 'block';
                formattedDiv.innerHTML = data;
            } else {
                resultDiv.style.display = 'block';
                formattedDiv.style.display = 'none';
                resultDiv.textContent = JSON.stringify(data, null, 2);
            }
        }

        function showError(error) {
            const resultDiv = document.getElementById('result');
            const formattedDiv = document.getElementById('formatted-result');
            resultDiv.style.display = 'block';
            formattedDiv.style.display = 'none';
            resultDiv.textContent = `错误: ${error}`;
            resultDiv.style.borderLeftColor = '#F56C6C';
        }

        async function getAllRoutes() {
            try {
                const response = await fetch(`${baseURL}/api/debug/routes`);
                const data = await response.json();

                if (data.code === 200) {
                    let html = `<h3>所有路由 (共 ${data.data.total} 个)</h3>`;
                    data.data.routes.forEach(route => {
                        html += `
                            <div class="route-item">
                                <div>
                                    ${route.methods.map(method => `<span class="method">${method}</span>`).join('')}
                                    <span class="endpoint">${route.endpoint}</span>
                                </div>
                                <div class="path">${route.path}</div>
                            </div>
                        `;
                    });
                    showResult(html, true);
                } else {
                    showError(data.message);
                }
            } catch (error) {
                showError(error.message);
            }
        }

        async function getEndpointsByBlueprint() {
            try {
                const response = await fetch(`${baseURL}/api/debug/endpoints`);
                const data = await response.json();

                if (data.code === 200) {
                    let html = '<h3>按蓝图分组的端点</h3>';
                    Object.keys(data.data).forEach(blueprint => {
                        html += `<h4>蓝图: ${blueprint}</h4>`;
                        data.data[blueprint].forEach(endpoint => {
                            html += `
                                <div class="route-item">
                                    <div>
                                        ${endpoint.methods.map(method => `<span class="method">${method}</span>`).join('')}
                                        <span class="endpoint">${endpoint.endpoint}</span>
                                    </div>
                                    <div class="path">${endpoint.path}</div>
                                </div>
                            `;
                        });
                    });
                    showResult(html, true);
                } else {
                    showError(data.message);
                }
            } catch (error) {
                showError(error.message);
            }
        }

        async function getProductsAPI() {
            try {
                const response = await fetch(`${baseURL}/api/products`);
                const data = await response.json();
                showResult(data);
            } catch (error) {
                showError(error.message);
            }
        }
    </script>
</body>

</html>